<template>
	<view>
		<view class="bw-shade" v-if="Switch == true" @click="negation"></view>
		<view class="bw-screen-right-body" :style="{'height':windowHeight + 'px','margin-right':-rightWidth + 'px'}"
			ref="screen_right" :class="{'active_right':mode == 'right'}" v-if="Switch == true && mode == 'right'">
			<slot></slot>
		</view>
		<view ref="screen_bottom" class="bw-screen-bottom_body"
			:style="{'height': bottomHeight +'rpx','margin-bottom': -bottomHeight +'px'}"
			:class="{'active_bottom':mode == 'bottom'}" v-if="Switch == true && mode == 'bottom'">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			swItch: { //是否打开弹框
				type: Boolean,
				default: false
			},
			mode: { //弹框弹出的方向,默认为底部
				type: String,
				default: 'bottom'
			},
			bottomHeight:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				rightWidth: 0,
				Switch:this.swItch
			}
		},
		watch:{
			swItch(value){
				if(value == true){
					this.Switch = true;
				}else{
					this.Switch = false;
				}
			}
		},
		mounted() {
			try {
				const res = uni.getSystemInfoSync();
				this.windowWidth = res.windowWidth;
				this.windowHeight = res.windowHeight;
				if (this.mode == 'right') {
					this.rightWidth = this.$refs.screen_right.$el.offsetWidth;
				}
				console.log(this.windowHeight);
			} catch (e) {
				// error
				console.log(e);
			}
		},
		methods: {
			negation(){
				this.Switch = false;
				this.$emit("Change",false);
			}
		}
	}
</script>

<style scoped lang="scss">

		.bw-shade {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0px;
			top: 0rpx;
			background-color: rgba(0, 0, 0, 0.3);
			z-index: 100;
		}

		.bw-screen-right-body {
			width: 70%;
			background-color: #FFFFFF;
			z-index: 2000;
			float: right;
		}

		.bw-screen-bottom_body {
			width: 100%;
			background-color: #FFFFFF;
			z-index: 2000;
			position: fixed;
			bottom: 0rpx;
			border-top-right-radius:20rpx;
			border-top-left-radius:20rpx;
		}

	.active_right {
		margin-right: 0rpx !important;
		-webkit-animation: bounceInRight 0.5s .2s ease both;
	}

	@-webkit-keyframes bounceInRight {
		0% {
			opacity: 0;
			-webkit-transform: translateX(2000px)
		}

		100% {
			-webkit-transform: translateX(0)
		}
	}

	.active_bottom {
		margin-bottom:0rpx !important;
		-webkit-animation: bounceInUp 0.5s .2s ease both;
	}

	@-webkit-keyframes bounceInUp {
		0% {
			transform: translateY(300px);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>
